<template>
	<view class="container">
		<uni-nav-bar
		fixed="true" 
		color="#ffffff" 
		:border="false"
		left-icon="back"
		@clickLeft="back"
		background-color="rgba(0, 0, 0, 0)" 
		:status-bar="true" 
		title="积分兑换"  />
		<view class="content">
			<swiper style="height: 750rpx;" autoplay="autoplay" interval="5000" duration="400" circular="true" v-if="bannerList.length">
				<swiper-item class="main-img" v-for="(banner, index) in bannerList" :key="index">
					<image class="main-img" :src="banner" mode="widthFix"></image>
				</swiper-item>
			</swiper>
			<!-- <image :src="details.banner" class="main-img" mode="widthFix"></image> -->
			<view class="product-infor">
				<view class="name">{{details.name}}</view>
				<view class="desc" v-if="details.introduce">{{details.introduce}}</view>
				<view class="price">
					<template v-if="details.score">
						{{details.score}}<text class="small">积分+</text>
					</template>
					<template v-if="details.price && details.price !=0">
						<text class="small">{{details.price}}元</text>
					</template>
				</view>
			</view>
			<view class="details-wrapper">
				<view class="title">商品详情</view>
				<view class="details">
					<rich-text :nodes="nodes"></rich-text>
				</view>
			</view>
			<view class="menu-wrapper" :style="{ paddingBottom: tabbarBottom + 'px' }">
				<view class="btn off" v-if="details.productCount == 0">库存不足</view>
				<view class="btn" v-if="details.productCount != 0" @click="confirmOrder(1)">立即兑换</view>
			</view>
			<view class="place"></view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import { frontDetail } from '@/api/product.js'
	export default {
		components: {uniNavBar},
		data() {
			return {
				tabbarBottom: 0,
				productId: '',
				details: {},
				nodes: '',
				bannerList: []
			}
		},
		onLoad(option) {
			this.productId = option.productId
		},
		onShow() {
			const fixSize = () => {
				const {
					safeAreaInsets,
					platform
				} = uni.getSystemInfoSync()
				
				console.log(uni.getSystemInfoSync())
				let barpx = 0
				if (safeAreaInsets && safeAreaInsets.bottom) {
					if (safeAreaInsets.bottom > 0) {
						barpx = safeAreaInsets.bottom
					} else {
						barpx = 0
					}
				}
				if(platform == "devtools"){
				    this.tabbarBottom = barpx || 6
				}else if(platform == "ios"){
					this.tabbarBottom = barpx || 30
				}else if(platform == "android"){
					this.tabbarBottom = barpx || 30
				}
			}
		
			
			fixSize()
			this.getDetails()
		},
		methods: {
			getDetails() {
				const data = {
					productId: this.productId
				}
				frontDetail(data).then(respanse => {
					const {detail, store, type} = respanse.result
					if (detail) {
						this.nodes = detail.replace(/\<img/gi, '<img style="max-width: 100% !important;height: auto!important;display: block!important"')
					}
					this.details = respanse.result
					
					this.bannerList = respanse.result.banner.split(',')
					console.log(this.bannerList)
					if (store > 0) {
						this.$set(this.details, 'productCount', 1)
					} else {
						this.$set(this.details, 'productCount', 0)
					}
				})
			},
			
			back() {
				uni.navigateBack()
			},
			
			confirmOrder(buyType) {
				//  buyType 1立即购买 2购物车
				uni.navigateTo({
					url: `/pages/integral/confirm-order?buyType=${buyType}&productDetails=${encodeURIComponent(JSON.stringify(this.details))}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.uni-navbar__placeholder{
		display: none !important;
	}
	/deep/.uni-icons {
		background-color: rgba(0,0,0,0.4);
		border-radius: 50%;
	}
	.main-img{
		display: block;
		width: 100%;
	}
	.product-infor{
		position: relative;
		padding: 24rpx 24rpx 30rpx;
		margin: 25rpx 25rpx 0;
		background: #FFFFFF;
		border-radius: 10rpx;
		.name{
			line-height: 48rpx;
			font-size: 38rpx;
			font-weight: bold;
			color: #000000;
		}
		.desc{
			margin-top: 12rpx;
			line-height: 34rpx;
			font-size: 24rpx;
			color: #999999;
		}
		.price{
			margin-top: 24rpx;
			line-height: 51rpx;
			font-size: 51rpx;
			color: #ED602B;
			.small{
				font-size: 24rpx;
			}
		}
		.count-wrapper{
			position: absolute;
			right: 10rpx;
			bottom: 24rpx;
		}
	}
	.details-wrapper{
		padding: 22rpx 24rpx;
		margin: 20rpx 25rpx 0;
		background: #FFFFFF;
		border-radius: 10rpx;
		.title{
			line-height: 42rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #000000;
		}
		.details{
			padding-top: 21rpx;
		}
	}
	.menu-wrapper{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
		padding: 12rpx 16rpx;
		background-color: #fff;
		display: flex;
		flex-direction: row-reverse;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		.btn{
			width: 220rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			text-align: center;
			font-size: 28rpx;
			color: #fff;
			background: linear-gradient(90deg, #EB7C3F, #EA5D2E);
			&.off{
				background: #BCBCBC;
				color: #fff;
			}
		}
	}
	.place{
		height: 104rpx;
		visibility: hidden;
	}
</style>
